<template>
  <div v-if="pageSize instanceof Array&&pageSize.length">
    <fx-select v-model="currentPageSize" :size="size" width="70" @change="$emit('selectChange',currentPageSize)">
      <fx-option v-for="item in pageSize" :key="item" :label="item" :value="item"/>
    </fx-select>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref } from 'vue'
import { ComponentSize, componentSizeArr } from '@/base/types'

export interface PaginationSelectProps {
  pageSize: number | number[];
  size: ComponentSize
}

export default defineComponent({
  name: 'paginationSelect',
  props: {
    pageSize: {
      type: [Number, Array] as PropType<number | number[]>,
      default: 10
    },
    // 大小
    size: {
      type: String as PropType<ComponentSize>,
      default: 'default',
      validator (val: ComponentSize): boolean {
        return componentSizeArr.includes(val)
      }
    }
  },
  emits: ['selectChange'],
  setup (props: PaginationSelectProps) {
    const currentPageSize = ref<number>(10)

    onMounted(() => {
      if (props.pageSize instanceof Array && props.pageSize.length) {
        currentPageSize.value = props.pageSize[0]
      } else if (!(props.pageSize instanceof Array)) {
        currentPageSize.value = props.pageSize
      }
    })

    return {
      currentPageSize
    }
  }
})
</script>
